<template>
    <div class="contact-container">
        <h1>联系我们</h1>

        <!-- 销售信息版块 -->
        <div class="contact-section">
            <h2>销售据点</h2>
            <div class="sales-grid">
                <div class="sales-office">
                    <h3 style="text-align: left;">深圳(总部)</h3>
                    <p style="text-align: left;"><i class="icon-location"></i><span class="contact-label">地址:</span> 广东省深圳市福田区华强北街道上步工业区305栋3B01</p>
                    <div class="contact-info">
                        <p style="text-align: left;"><i class="icon-user"></i><span class="contact-label">联系人:</span> HAPPY ZHOU(女士)</p>
                        <p style="text-align: left;"><i class="icon-phone"></i><span class="contact-label">电话:</span> 18689205299</p>
                    </div>
                    <div class="contact-info">
                        <p style="text-align: left;"><i class="icon-user"></i><span class="contact-label">联系人:</span> 王建发</p>
                        <p style="text-align: left;"><i class="icon-phone"></i><span class="contact-label">电话:</span> 13121046222</p>
                    </div>
                     
                </div>
                <div class="sales-office">
                    <h3 style="text-align: left;">株洲终端销售(Branch office)</h3>
                    <div class="contact-info">
                        <p style="text-align: left;"><i class="icon-user"></i><span class="contact-label">联系人:</span> HAPPY ZHOU(女士)</p>
                        <p style="text-align: left;"><i class="icon-phone"></i><span class="contact-label">电话:</span> 18689205299</p>
                    </div>
                </div>
                <div class="sales-office">
                    <h3 style="text-align: left;">北京终端销售(Branch office)</h3>
                    <div class="contact-info">
                        <p style="text-align: left;"><i class="icon-user"></i><span class="contact-label">联系人:</span> HAPPY ZHOU(女士)</p>
                        <p style="text-align: left;"><i class="icon-phone"></i><span class="contact-label">电话:</span> 18689205299</p>
                    </div>
                    <div class="contact-info">
                        <p style="text-align: left;"><i class="icon-user"></i><span class="contact-label">联系人:</span> 王建发</p>
                        <p style="text-align: left;"><i class="icon-phone"></i><span class="contact-label">电话:</span> 13121046222</p>
                    </div>
                </div>
            </div>
        </div>

        <!-- 仓储物流版块 -->
        <div class="contact-section">
            <h2>仓储物流</h2>
            <div class="warehouse-grid">
                <div class="warehouse-info">
                    <h3>仓储物流中心(总部)</h3>
                    <img src="../assets/warehouse-sz.png" alt="深圳仓库" class="warehouse-image">
                    <div class="contact-detail">
                        <p><i class="icon-user"></i><span class="contact-label">联系人:</span>HAPPY ZHOU(女士)</p>
                        <p><i class="icon-phone"></i><span class="contact-label">电话:</span>18689205299</p>
                    </div>
                </div>
                <div class="warehouse-info">
                    <h3>宝源大厦仓储中心(Branch 0ffice)</h3>
                    <img src="../assets/warehouse-zz.png" alt="株洲仓库" class="warehouse-image">
                    <div class="contact-detail">
                        <p><i class="icon-user"></i><span class="contact-label">联系人:</span> HAPPY ZHOU(女士)</p>
                        <p><i class="icon-phone"></i><span class="contact-label">电话:</span> 18689205299</p>
                        <p><i class="icon-location"></i><span class="contact-label">地址:</span> 深圳市福田区华富街道宝源大厦一楼</p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
    <style scoped>
    .contact-container {
        max-width: 1200px;
        margin: 0 auto;
        padding: 20px;
    }

    h1 {
        text-align: center;
        color: #2c3e50;
        margin-bottom: 40px;
    }

    .contact-section {
        margin-bottom: 60px;
        padding: 30px;
        background: #f8fafc;
        border-radius: 12px;
    }

    .sales-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 30px;
    }

    .sales-office {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }

    .warehouse-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
        gap: 30px;
    }

    .warehouse-info {
        background: white;
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.1);
    }

    .warehouse-image {
        width: 100%;
        height: 200px;
        object-fit: cover;
        border-radius: 4px;
        margin: 15px 0;
    }

    .contact-info p {
        margin: 10px 0;
        line-height: 1.6;
    }

    .contact-detail {
        margin-top: 15px;
    }

    .contact-detail p {
        margin: 8px 0;
        line-height: 1.6;
        color: #333;
        display: flex;
        align-items: center;
    }

    .icon-user,
    .icon-phone,
    .icon-location {
        display: inline-block;
        width: 20px;
        height: 20px;
        margin-right: 8px;
        background-size: contain;
        background-repeat: no-repeat;
    }

    .icon-user {
        background-image: url('../assets/icons/user.png');
    }

    .icon-phone {
        background-image: url('../assets/icons/phone.png');
    }

    .icon-location {
        background-image: url('../assets/icons/location.png');
    }
</style>
